<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="fullName = 'xiao li'">修改名字</button>
    <p>
      {{ firstName }}--{{ lastName }} <br />
      {{ fullName }}
    </p>
    <p>{{ count }}--{{ doubleCount }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "AboutView",
});
</script>

<script lang="ts" setup>
import { ref, computed } from "vue";

let firstName = ref("lao");
let lastName = ref("wang");

//可读可写的计算属性
let fullName = computed({
  get() {
    return firstName.value + " " + lastName.value;
  },
  set(val) {
    [firstName.value, lastName.value] = val.split(" ");
  },
});

//计算属性简写(只读)
let count = ref(3);
let doubleCount = computed(() => {
  return count.value * 2;
});

console.log(doubleCount);
</script>
